1
Select and move elements
Click elements to select them, or use the element tree on the left. You can also click and drag to move elements around and change the layout.
Welcome to
The Nordcraft Coloring book
This page is your playground. It’s here to help you explore how Nordcraft works. Every headline, button, and image can be styled, colored, and reshaped. Try it out — change this text’s font, swap its color, or make it bigger. You can’t break anything, so have fun experimenting.
How it works
The Coloring Book
This isn’t a finished landing page — it’s a sandbox. Each section below is here to help you test, style, and play with Nordcraft. You’ll find headlines, paragraphs, buttons, images, cards, and different layouts — all ready for you to transform.
2
Edit styles and attributes
Use the style panel on the right to change colors, fonts, and sizes. You can also set element attributes or trigger events.
3
Insert and explore
Use the bottom bar to add new elements to the page, toggle into preview mode, and try our AI assistant to help you with Nordcraft.
Inspiration
Tips and tricks
Not sure where to start? Here are a few tips to help you get going.
Make Your Headline Shine
Style the main headline by adjusting color, font, weight, size, spacing, line height, and alignment. Try new fonts via the theme editor in the project sidebar (CMD/CTRL + K).
Turn Buttons into Invitations
Make buttons stand out with color, shadows, and hover effects; add hover via Style (+). Use solid fills, outlines, or gradients; add soft shadows and responsive hover states like color shifts or subtle transforms.
Paint the Page Background
Set a strong background with images, solid colors, or gradients; keep contrast high. Upload images via the style panel’s background dialog to add texture and patterns.
Responsive by Design
Use responsive grids, percentage widths, and scale type/spacing with responsive units. Stack columns on smaller breakpoints so layouts adapt across screen sizes.
Build More, Learn Faster
Create pages, add and style elements, and use theme variables to stay consistent. Build through the project sidebar; define CSS variables in the theme editor to speed mastery.
Want to learn more about Nordcraft?
Dive deeper into everything Nordcraft can do! Explore tutorials, guides, YouTube videos, and tips to make the most of your creative playground. Connect with our amazing community and access all the resources you need to master the editor and discover new templates.